<template>
  <div class="tips" :class="{ show: TipsShow }">
    <h2>关于：</h2>
    <p>这个应用可以用来追踪你选择城市的当前天气</p>
    <h2>使用说明：</h2>
    <p>
      1.点击搜索框输入你希望追踪的城市
      <br />
      2.在搜索结果中选中一个城市，你将获取当地最新的天气
      <br />
      3.点击右侧的＋号可以将追踪城市的天气情况保存在首页
    </p>
    <h2>移除城市：</h2>
    <p>如果你不想在首页关注某个城市,可以通过底部的按钮删除它</p>
    <button @click="emits('handleClose')">关闭</button>
  </div>
</template>

<script setup>
const props = defineProps({
  TipsShow: {
    type: Boolean,
    required: true,
  },
});
const emits = defineEmits(['handleClose']);
</script>

<style lang="scss" scoped>
.tips {
  position: fixed;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  color: #333;
  width: 350px;
  padding: 15px;
  background-color: #fff;
  border-radius: 5px;
  z-index: -1;
  opacity: 0;
  transition-duration: 1s;
  &.show {
    opacity: 1;
    transition-duration: 1s;
    z-index: 999;
  }
  h2 {
    font-size: inherit;
    font-weight: inherit;
  }
  p {
    font-size: 0.75rem;
    line-height: 1rem;
    margin-bottom: 1rem;
  }
  button {
    width: 72px;
    height: 35px;
    background-color: #00668a;
    color: #fff;
    border: none;
    border-radius: 3px;
    font-size: 16px;
    cursor: pointer;
  }
}
</style>